<template>
  <div>
    <common-head :title="title"></common-head>
    <div class="warp">
      <!-- 详情轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in pics" :key="item.id">
          <img :src="item.pic" alt="">
        </van-swipe-item>
        <!-- /详情轮播 -->
      </van-swipe>
      <h2>{{ basicInfo.name }}</h2>
      <div class="content" v-html="content"></div>
      <!-- 底部商品导航 -->
        <van-goods-action>
        <van-goods-action-icon
        @click="$router.push('/home')"
         icon="home-o" text="首页"/>
        <van-goods-action-icon
        @click="$router.push('/cart')"
         icon="cart-o" text="购物车" :badge="$store.state.cart.items.length" />
        <van-goods-action-icon icon="shop-o" text="店铺"/>
        <van-goods-action-button @click="skuPopup" type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
      <!-- /底部商品导航 -->
      <!-- 弹出层 -->
      <van-popup v-model="show"
      closeable
      round position="bottom" :style="{ height: '30%' }">
        <van-card
          :num="sku.num"
          :price="sku.minPrice"
          :title="sku.name"
          :thumb="sku.pic"
        >
          <template #footer>
            <van-stepper
             v-model="sku.num" theme="round" button-size="22" disable-input />
          </template>
        </van-card>
        <van-button @click="addCart" type="danger" size="large">确认</van-button>
      </van-popup>
      <!-- /弹出层 -->
    </div>
  </div>
</template>

<script>
import { fetchDetail, addCart } from 'api'
import CommonHead from '../../components/CommonHead.vue'
import { getToken } from 'utils'
import { Toast } from 'vant'
export default {
  data () {
    return {
      basicInfo: {},
      content: '',
      pics: [],
      show: false,
      sku: {
      },
      title: '商品详情'
    }
  },
  created () {
    this.fetchDetail()
  },
  methods: {
    addCart () {
      addCart({
        goodsId: this.sku.id,
        number: this.sku.num,
        token: getToken()
      }).then(res => {
        Toast.success({
          message: '加入成功',
          duration: 1000
        })
        this.$store.commit('cart/set_items', res.data.data.items)
      })
      this.show = false
    },
    // 详情页加入购物车弹出层
    skuPopup () {
      this.show = true
    },
    // 详情页
    fetchDetail () {
      fetchDetail(this.$route.query.id).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.basicInfo = res.data.data.basicInfo
          this.content = res.data.data.content.replace(/<img/gi, '<img style="display:block;width:100%"')
          this.pics = res.data.data.pics
          this.title = this.basicInfo.name
          this.sku = {
            ...this.sku,
            ...res.data.data.basicInfo
          }
        }
      })
    }
  },
  components: { CommonHead }

}
</script>

<style lang="scss" scoped>
.warp{
  padding-top: 46px;
  padding-bottom: 50px;
  img{
    width: 100%;
  }
}
</style>
